<template>
    <VueJsCounter v-if="isPosition" class="purecounter" id="counter-t" style=" display: inline;" :start="start" :end="end"
        :duration="duration" :thousand="thousand" :decimal="decimal" :always="true">
    </VueJsCounter>
</template>

<script>
import VueJsCounter from 'vue-js-counter'
export default {
    components: {
        VueJsCounter
    },
    props: {        
        parentQuerySelector: {
            type: String,
            default: 'body'
        },
        start: {
            type: [String, Number],
            default: 0
        },
        end: {
            type: [String, Number],
            default: 0
        },
        duration: {
            type: [String, Number],
            default: 3000
        },
        thousand: {
            type: String,
            default: '.'
        },
        decimal: {
            type: String,
            default: ','
        },
    },
    data() {
        return {
            isPosition: false
        }
    },
    mounted() {
        this.checkVisibility();
        window.addEventListener("scroll", this.checkVisibility);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.checkVisibility);
    },
    methods: {
        checkVisibility() {
                const screenHeight = screen.height;
                const elBounding = document.querySelector(this.parentQuerySelector)?.getBoundingClientRect()
                if(elBounding?.top <= screenHeight) {
                    this.isPosition = true;
                } else if(elBounding?.bottom + screenHeight <= 0) {
                    this.isPosition = false;
                } else {
                    this.isPosition = false;
                }
                
        }
    },
}
</script>

<style></style>